<template>
  <el-select
    :value="value"
    @input="$emit('input', $event)"
    :multiple="multiple"
    :clearable="clearable"
    :collapse-tags="collapseTags"
    :placeholder="placeholder"
    :filterable="filterable"
    :filter-method="filterMethod"
    reserve-keyword
    :popper-append-to-body="popperAppendToBody"
    @focus="filterMethod()"
  >
    <el-option
      v-for="item in filterData"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>
<script>
import { searchWord } from '@/util/data'
export default {
  name: 'CMultSelect',
  components: {},
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    options: {
      type: Array,
      default() {
        return []
      }
    },
    multiple: { type: Boolean, default: true },
    clearable: { type: Boolean, default: true },
    collapseTags: { type: Boolean, default: true },
    placeholder: { type: String, default: '' },
    filterable: { type: Boolean, default: true },
    popperAppendToBody: { type: Boolean, default: false }
  },
  data() {
    return {
      filterData: []
    }
  },
  computed: {},
  watch: {
    options: {
      deep: true,
      handler() {
        this.filterMethod()
      }
    }
  },
  beforeCreate() {},
  created() {
    this.filterMethod()
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    filterMethod(keyword) {
      this.filterData = searchWord(keyword, this.options, 'label')
    }
  }
}
</script>
<style lang="scss"></style>
